'use client'

'use client';がファイルの先頭についていると、このファイル内でexportされた関数全てがシリアライズ可能なようにリファレンス化されます。

code:tsx

test('top-level use client', async () => {

const code = `

'use client';

export default function App() {

return <div>Hello World</div>;

}

`;

expect(await transform(code, '/src/App.tsx', { ssr: true }))

.toMatchInlineSnapshot(`

"

import { registerClientReference } from 'react-server-dom-webpack/server.edge';

export default registerClientReference(() => { throw new Error('It is not possible to invoke a client function from the server: /src/App.tsx#default'); }, '/src/App.tsx', 'default');

"

`);

});